import { h, defineComponent } from 'vue'
import AppTest2 from './test2.js'
import AppTest3 from './test3.js'

export default defineComponent({
  name: 'app-test1',
  // render() {
  //   return h('div', {class: 'example'}, 'Hello World')
  // },
  setup(props) {
    return () => {
      return h(
        'div',
        { ref: 'test01', class: 'example' },
        {
          default: () => {
            return [
              h(
                'div',
                { ref: 'test02', class: 'example2' },
                {
                  default: () => {
                    return [
                      h(
                        'div',
                        { ref: 'test03', class: 'example3' },
                        {
                          default: () => {
                            return [
                              ...['1', '2', '3', '4', '5'].map((item) =>
                                h(
                                  'div',
                                  {
                                    ref: 'test04' + item,
                                    class: 'example4',
                                  },
                                  'test1',
                                ),
                              ),
                              h(AppTest2, { ref: 'appTest2' }),
                              h(AppTest3, { ref: 'appTest3' }),
                            ]
                          },
                        },
                      ),
                    ]
                  },
                },
              ),
            ]
          },
        },
      )
    }
  },
})
